<template>
  <div>
    <!-- 顶部导航栏 -->

    <!-- 导航BODY -->
    <div class="tab" v-show="show">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'pane',
  data: function () {
    return {
      show: true
    }
  },
  // props为来自父组件的变量，实现父组件与子组件通信
  props: {
    // 设置pane的标识
    index: {
      type: String
    },
    // label是设置标题
    label: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    }
  },
  methods: {
    updateNav: function () {
      // $parent 父链，通知父组件（tabs）进行更新。
      // 说明：在业务中尽可能不要使用$parent来操作父组件，$parent适合标签页这样的独立组件

      this.$parent.updateNav()
    }
  },
  // 监听label
  watch: {
    label () {
      this.updateNav()
    }
  },

  mounted () {
    // 初始化tabs

    this.updateNav()
  }
}
</script>

<style scoped>
</style>
    

